/**
* Copyright (c) 2016 Mirantis Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*    http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
* implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

@import "settings.less";
@import "buttons.less";
@import "mixins.less";
@import "icons.less";


body {
  background-color: @background;
  font-family: @open-sans;
  font-size: 13px;
  font-weight: 400;
  margin: 0;
  padding: 0;
  color: @text;
}

a {
  color: @base;
  text-decoration: none;
  &:hover {
    color: @base-hover;
    text-decoration: none;
    > .glyphicon {
      opacity: 1;
    }
  }
}

textarea {
  resize: none;
}

.text-muted   {color:@background - 50%;}
.text-primary {color: @text;}
.text-info    {color: @blue;}
.text-success {color: @green;}
.text-warning {color: @orange;}
.text-danger  {color: @shrimp;}

.uc {
  text-transform: uppercase;
}

.mono {
  font-family: monospace;
}

.line {
  display: block;
  height: 1px;
  background-color: @background - 30%;
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  height: 100%;
  margin: 0;
}

.hidden {
  display: none !important;
}

.main {
  width: @max-size;
  margin-left: auto;
  margin-right: auto;

  & > .alert {
    margin: 15px 0 0 0;
  }
}

.form-control {
  border-color: @base + 30%;
  padding: 6px 8px;
  font-size: 13px;
  &:focus {
    border-color: @base;
    box-shadow: 0 0 0;
  }
}
.form-control::-moz-placeholder {
  color: @text + 80%;
  font-weight: 100;
  opacity: 1;
}
.form-control:-ms-input-placeholder {
  color: @text + 80%;
  font-weight: 100;
}
.form-control::-webkit-input-placeholder {
  color: @text + 80%;
  font-weight: 100;
}

// HEADER

.header {
  @header-height: 101px;

  .header-background {
    width: 100%;
    min-width: @max-size + 30px;
    height: @header-height;
    background: rgba(0,0,0,0.05);
    border-bottom: 1px solid @shrimp;
    position: absolute;
    top: 0px;
    left: 0px;
  }

  .logo {
    display: block;
    width: 150px;
    height: 40px;
    margin-top: 30px;
    background: url(../images/shrimp-logo.svg) no-repeat top left;
  }

  .navigation {
    height: @header-height;
    overflow: hidden;
    margin: 0;

    .menu-item {
      font-family: @source-sans;
      display: inline-block;
      margin: 40px 10px 0px;
      text-transform: uppercase;
      font-size: 16px;
      font-weight: 400;
      &:first-child {
        margin-left: 0px;
      }
      &:last-child {
        margin-right: 0px;
      }
      a {
        color: @text;
        .navigation-animation(@shrimp);

        &.active {
          border-bottom: 4px solid @shrimp;
        }
      }
    }
  }

  .current-user {
    display: block;
    height: 30px;
    margin: 40px 0px 0px;
    text-align: right;
  }
}

// PAGE TITLE

.page-title {
  display: block;
  margin: 30px 0px;
  height: 37px;

  &.navigated {
    margin-top: 0;
  }

  h1, h2 {
    font-family: @source-sans;
    font-size: 20px;
    font-weight: 500;
    text-transform: uppercase;
    margin: 7px 0px;
  }

  h1 span {
    color: @text + 50%;
    text-transform: none;
  }

  h2 {
    font-weight: 400;
    font-size: 14px;
    color: @text + 20%;
  }

  .main-button {
    text-align: right;
    margin: 2px 0;
    .btn + .btn {
      margin-left: 25px;
    }
  }
}

label {
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
}

.filters {
  display: block;
  height: 56px;
  border-top: 1px solid @background - 50%;
  border-bottom: 1px solid @background - 50%;
  margin-bottom: 30px;
  padding-top: 9px;
  .form-group {
    margin: 0;
    padding: 0;
  }
  label {
    display: inline-block;
    width: 38%;
    margin-top: 3px;
    margin-right: 5px;
    text-align: right;
    padding-top: 0 !important;
  }
  select {
    display: inline-block;
    width: 58%;
  }
  button {
    padding: 9px 20px 8px 20px;
  }
}

.group-name {
  h2 {
    font-size: 16px;
    text-transform: uppercase;
    margin: 0 0 10px;
    padding: 0;
  }
}

.table-help {
  height: 12px;
  display: block;
  font-family: @source-sans;
  font-size: 11px;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: @text + 50%;
}

.box {
  display: block;
  height: 50px;
  background-color: @white;
  border: 1px solid @background - 50%;
  overflow: hidden;
  margin-bottom: 10px;

  &:hover {
    border: 1px solid @background - 90%;
  }

  &.active {
    cursor: pointer;
  }

  &.open {
    height: auto;
    min-height: 50px;

    .bowels {
      display: block;
    }

    & > div {
      &.action {
        .glyphicon {
          top: 10px;
        }
      }
    }
  }

  & > div {
    display: block;
    padding: 9px 0px 9px 15px;
    overflow: hidden;
    line-height: 30px;

    &.icon {
      height: 48px;
      padding: 15px 0 0 30px;

      &.servers {
        text-align: right;
        padding-right: 50px;
      }
    }

    &.name {
      height: 48px;
      font-weight: 600;
      input {
        width: 300px;
        height: 30px;
        margin-left: -8px;
      }
      .glyphicon {
        margin-left: 0;
      }
    }

    &.parameter, &.button {
      height: 48px;
      font-weight: 400;
      color: @text + 30%;
      button {
        line-height: 16px;
        margin: 3px 0px 0px 0px;
        display: inline-block;
        width: 70px;
      }
    }

    &.button {
      padding-right: 15px;
      button {
        float: right;
        margin-left: 10px;
      }
    }

    &.action {
      height: 48px;
      font-weight: 400;
      color: @text + 30%;
      text-align: right;

      .glyphicon {
        right: 8px;
        top: 8px;
      }
    }

    &.state {
      height: 48px;
      font-weight: 400;
      text-transform: uppercase;

      &.off {
        .text-danger;
      }
    }
  }

  .bowels {
    max-height: 310px;
    overflow-y: auto;
    overflow-x: hidden;
    cursor: default;
    clear: both;
    border-top: 1px solid @background - 50%;
    min-height: 50px;
    padding: 20px 0 0 0;

    .col-xs-12 {
      &:last-child {
        margin-bottom: 20px;
      }
    }

    h3 {
      font-size: 14px;
      text-transform: uppercase;
      margin: 0 0 20px 0;
      padding: 0;
      font-weight: 100;
    }

    div button {
      margin: 3px auto;
    }

    .name, .parameter, .buttons {
      display: block;
      height: 35px;
      overflow: hidden;
    }

    .buttons {
      text-align: right;
      button {
        margin-left: 8px;
      }
    }

    .server-details {
      margin-bottom: 20px;
      padding: 0 30px;

      &:nth-child(2) {
        padding-right: 15px;
      }

      .server-details-item {
        min-height: 32px;
        border-top: 1px solid @background - 30%;
        &:hover {
          background-color: @background + 20%;
        }

        &.scrollable {
          max-height: 81px;
          .parameter {
            overflow-x: hidden;
            overflow-y: scroll;
            max-height: 80px;
            overflow: auto;
            height: auto;
            ul {
              margin: 5px 0 0 0;
              li {
                list-style: none;
                line-height: 20px;
              }
            }
          }
        }

        .name {
          display: block;
          float: left;
          width: 30%;
          height: 30px;
          padding: 0;
          overflow: hidden;
        }

        .parameter {
          display: block;
          float: right;
          width: 60%;
          text-align: right;
          height: 30px;
          padding: 0px;
          overflow: hidden;
        }

        .json {
          white-space: pre-wrap;
          text-align: left;
          line-height: 14px;
          padding-top: 8px;
          padding-bottom: 8px;
          a {
            color: @base;
            float: right;
          }
          span {
            .mono();
            font-size: 12px;
          }
        }

        &:last-child {
          border-bottom: 1px solid @background - 30%;
        }
      }
    }
  }
}

.grid {
  background-color: @white;
  border: 1px solid @background - 50%;
  margin: 0 0 20px 0;
  padding-left: 0px;
  padding-right: 0px;

  .grid-header {
    button.btn-link {
      vertical-align: baseline;
      font-size: 13px;
      padding: 0;
      .text-primary;

      span {
        margin: auto 0;
      }
    }
  }

  .grid-line {
    border: 1px solid @background - 50%;
    border-width: 1px 0 0 0;
    padding-left: 15px;
    padding-right: 15px;

    &.group {
      background-color: @white - 10%;
      text-transform: uppercase;
    }
  }

  .grid-line, .grid-header {
    display: block;
    height: 40px;
    overflow: hidden;

    &.error, &.unreachable {
      .text-danger;
      & a {
        .text-danger;
      }
    }

    &.table-help {
      border-width: 0;
      margin-bottom: 0;
    }

    label {
      text-transform: none;
    }

    & > div {
      display: block;
      height: 38px;
      padding: 4px 0px 4px 15px;
      overflow: hidden;
      line-height: 30px;

      &:first-child {
        padding-left: 0px;
      }

      .boolean {
        text-align: right;
      }

      input[type=radio], input[type=checkbox] {
        margin: 10px 4px 0 4px;
      }

      input[type=text], input[type=number] {
        height: 31px;
      }
    }

    .icon {
      padding-top: 10px;
      margin-top: 2px;
      text-align: right;
      .text-primary;
    }

    .name {
      font-weight: 600;
    }

    .state {
      font-weight: 400;
      text-transform: uppercase;
    }

    .parameter {
      font-weight: 400;
      color: @text + 30%;
      button {
        line-height: 16px;
        margin: -1px 0px 0px 0px;
        display: inline-block;
        width: 70px;
      }
    }

    .json {
      .mono();
      white-space: pre-wrap;
    }
  }
}

.roles.grid {
  .grid-header .name, .icon {
    text-align: center;
  }
}

.user-diff.grid {
  .grid-header {
    padding: auto 15px;
    div {
      text-align: center;
    }
  }
  .row {
    border: solid 1px @background - 50%;
    border-width: 1px 0 0 0;
    margin-left: 0px;
    margin-right: 0px;
    div:first-child, div:nth-child(2) {
      text-align: center;
    }
  }
}

.permissions.long-content {
  padding-bottom: 10px;
}

.clusters {
  .bowels .btn-danger {
    position: relative;
    bottom: 10px;
    float: right;
  }
}

.configurations {
  .delete {
    text-align: right;
    button {
      position: relative;
      bottom: 6px;
    }
  }
}

longdata {
  ul li {
    text-align: left;
  }
}

// MODAL WINDOW
.modal-content {
  border-radius: 0;
}
.modal-header {
  height: 55px;
  background-color: @background;
  border-bottom: 1px solid @shrimp;
  h4 {
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    margin-top: 2px;
  }
  .close {
    margin-top: 2px;
    &.tiny {
      font-size: 18px;
      margin-right: 10px;
    }
  }
}
.modal-errors {
  .alert-danger;
  .modal-body;
  border-bottom: 1px solid @shrimp;
  p:last-child {
    margin-bottom: 0;
  }
}
.modal-body {
  h1 {
    font-family: @source-sans;
    font-size: 20px;
    font-weight: 500;
    text-transform: uppercase;
    margin: 7px 0px 14px;
  }
  form {
    margin-bottom: none;

    h5 {
      font-weight: 600;
      text-transform: uppercase;
    }

    div.checkbox {
      height: 10px;
      label {
        text-transform: none;
      }
    }
  }
  .long-content {
    max-height: 200px;
    overflow-y: scroll;
    overflow-x: hidden;
  }
}
.modal-footer {
  border: 0;
}

.wizard-step {
  .subtitle {
    float: right;
    input[type='checkbox'] {
      margin-right: 5px;
    }
  }
  .has-error {
    .control-label {
      color: inherit;
    }
    .form-control.ng-untouched {
      border-color: inherit;
    }
  }
  .single-row {
    margin: 0 -15px 15px -15px;
    input[type='checkbox'] {
      margin-right: 4px;
    }
  }
}

#confirm.modal {
  .modal-footer {
    .btn-default {
    }
  }
}

// LOGIN

.login-background {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/background.png);
  background-size: auto;
  background-position: 0px 0px;
  background-repeat: repeat-x;
  animation: animatedBackground 40s linear infinite;
}

.login-box {
  @size: 440px;
  width: @size;
  height: @size;
  border-radius: @size / 2;
  background-color: @white;
  margin-top: 5%;
  margin-right: auto;
  margin-left: auto;
  .legend {
    width: 250px;
    margin: 0 auto 20px;
    h1 {
      margin: 0 0 4px;
      font-size: 16px;
    }
  }
  .logo-box {
    height: 200px;
    padding-top: 30px;
    .logo {
      display: block;
      width: 140px;
      height: 150px;
      margin-left: auto;
      margin-right: auto;
      background-image: url(../images/shrimp-logo-title.svg);
      background-repeat: no-repeat;
      background-size: auto;
    }
  }
  .form-group {
    @base-size: 8px;
    @padding-size: 90px;
    position: relative;
    padding: 0px @padding-size;
    .login-icon {
      display: inline-block;
      position: absolute;
      top: @base-size;
      left: @padding-size + 4px;
      z-index: 2;
    }
    .pass-icon {
      display: inline-block;
      position: absolute;
      top: @base-size * 8;
      left: @padding-size + 4px;
      z-index: 2;
      margin-top: 1px;
    }
    input {
      margin-bottom: @base-size * 3;
      padding-left: 30px;
    }
  }
  .login-error-message {
    text-align: center;
    margin-bottom: 15px;
    padding: 0 50px;
    max-height: 38px;
    overflow: hidden;
  }
  .login-button {
    display: block;
    width: 40%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    button {
      width: 100%;
    }
    p {
      margin-top: 10px;
    }
  }
}

.copyrights {
  text-align: center;
  margin: 20px 0px;
  font-size: 11px;
  color: @base;
}

@keyframes animatedBackground {
  from { background-position: 0 0; }
  to { background-position: 2500px 0; }
}

// LOADER

.app.loader {
  margin-top: 100px;
}

.loader {
  text-align: center;
  i {
    display: inline-block;
    height: 100px;
    width: 100px;
    background: url(../images/shrimp-logo.svg) no-repeat top left;
    background-size: cover;
    animation: spin 4s linear infinite;
    opacity: 0.7;
  }
  p {
    margin-top: 20px;
  }
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}

// Pager
nav {
  text-align: center;
  margin-top: 1px;

  ul.pagination {
    margin-top: 4px;

    li {
      a, a:hover, span, span:hover {
        background-color: transparent;
        color: @base;
        border-width: 0;
      }

      &.active {
        a, a:hover {
          background-color: transparent;
          border-width: 0;
          color: @shrimp;
        }
      }
    }
  }
}

iframe#downloader {
  display: none;
  width: 0px;
  height: 0px;
}
